<template>
	<view>
		<view class="top">
			<u-search shape="round" placeholder="搜索小区" v-model="communityValue" @custom="search" @change="search"
				@search="search">
			</u-search>
		</view>
		<view class="content">
			<view v-if="!communityValue" class="historyLocation">
				<!-- <view class="history_title">
					常住小区
				</view> -->
				<view class="history_content">
					<view v-for="(item,index) in historyList" :key="item.id" class="history_item"
						@click="chooeseLocation(item)">
						{{item.residentialName}}
					</view>
				</view>
			</view>
			<view v-else class="searchResult">
				<view v-for="(item,index) in resultList" class="result_item" @click="chooeseLocation(item)">
					<view class="name">
						{{item.communityName}}
					</view>
					<view class="des">
						{{item.area +"区"+item.street}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCommunityByName
	} from '../../utils/api.js'
	export default {
		data() {
			return {
				communityValue: '',
				historyList: [],
				resultList: []
			}
		},
		methods: {
			search() {
				getCommunityByName({
					name: this.communityValue,
					current: 1,
					pageSize: 10
				}).then(res => {
					this.resultList = res.data
					console.log("res", res)
				})
			},
			chooeseLocation(item) {
				uni.setStorageSync('communityName', item.communityName)
				uni.setStorageSync('communityId', item.ID)
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		.historyLocation {
			margin: 10rpx;
			background-color: #fff;
			border-radius: 15rpx;

			.history_title {
				margin-left: 20rpx;
				font-weight: bold;
				font-size: 40rpx;
				line-height: 80rpx;
				color: #303133;
			}

			.history_content {
				display: flex;
				flex-wrap: wrap;
				font-size: 30rpx;
				color: #A3A5A6;

				.history_item {
					padding: 5rpx 20rpx;
					border-radius: 20rpx;
					text-align: center;
					background-color: #F1F3F4;
					margin: 10rpx 30rpx;
				}
			}
		}

		.searchResult {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 20rpx;

			.result_item {
				border-bottom: 8rpx solid #F8F8F8;
				padding: 0 10rpx;

				.name {
					font-weight: bold;
					color: #F24300;
					margin: 10rpx 0;
				}

				.des {
					color: #A3A5A6;
				}
			}
		}
	}
</style>
